<template>
  <el-dialog
      title="上传新版本"
      :visible="visible"
      width="460px"
      :destroy-on-close="true"
      :lock-scroll="false"
      @update:visible="updateVisible">
    <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="82px">
      <el-form-item
          label="上传apk:"
          prop="apk">
        <el-upload action="" :show-file-list="false" accept=".apk" :http-request="uploadApk">
          <el-button :loading="uploading" size="small" type="primary">{{ uploading ? '上传中' : '点击上传' }}</el-button>
          <el-progress v-if="uploading" :percentage="uploadProgress"></el-progress>
          <div slot="tip" class="el-upload__tip">{{ apkName }}</div>
        </el-upload>
      </el-form-item>
      <el-form-item
          label="版本号:"
          prop="version">
        <el-input
            :maxlength="20"
            v-model="form.version"
            placeholder="请输入版本号"
            clearable/>
      </el-form-item>
      <el-form-item label="版本描述:">
        <el-input
            :maxlength="200"
            v-model="form.describe"
            placeholder="请输入版本描述"
            :rows="4"
            type="textarea"/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
          type="primary"
          @click="save"
          :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    visible: Boolean,
    data: Object
  },
  data() {
    return {
      form: {
        version: '',
        apk: '',
        describe: '',
      },
      rules: {
        version: [
          {required: true, message: '请输入版本号', trigger: 'blur'}
        ],
        apk: [
          {required: true, message: '请输上传apk文件', trigger: 'blur'}
        ],
        describe: [
          {required: true, message: '请输入升级描述', trigger: 'blur'}
        ]
      },
      loading: false,
      isUpdate: false,
      uploading: false,
      uploadProgress: 0,
      apkName: ''
    }
  },
  methods: {
    uploadApk(event) {
      if (this.uploading) {
        return
      }
      this.uploading = true
      this.uploadProgress = 0
      let estimate = Math.ceil(event.file.size/10240)
      let progress = 0
      const interval = setInterval(() => {
        progress++
        if (progress >= estimate) {
          clearInterval(interval)
        }
        this.uploadProgress = Math.round(progress/estimate*100)
        if (this.uploadProgress >= 98) {
          clearInterval(interval)
        }
      }, 10)
      const formData = new window.FormData()
      formData.append('file', event.file)
      axios({
        method: 'POST',
        //url: '/upload/uploadImage',
        url: '/app_version/uploadApk',
        data: formData,
        timeout: 30000,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then(res => {
        if (res.data.code === 0) {
          this.form.apk = res.data.data
          this.apkName = event.file.name
        } else {
          this.$notify.error({
            title: '上传错误!',
            message: res.data.msg
          })
        }
        this.uploading = false
      }).catch((e) => {
        this.uploading = false
        this.$message.error(e.message)
      })
    },
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$http.post('/app_version/edit', this.form).then(res => {
            this.loading = false
            if (res.data.code === 0) {
              this.$message.success(res.data.msg)
              if (!this.isUpdate) {
                this.form = {}
              }
              this.updateVisible(false)
              this.$emit('done')
            } else {
              this.$message.error(res.data.msg)
            }
          }).catch(e => {
            this.loading = false
            this.$message.error(e.message)
          })
        } else {
          return false
        }
      })
    },
    updateVisible(value) {
      this.$emit('update:visible', value)
    }
  }
}
</script>
